<template>
  <!-- 角色表单弹窗 -->
  <el-dialog
      v-model="visibleDialog"
      :title="props.title"
      width="50%"
      draggable
      @close="closeDialog"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="是否是主键 1主键 0不是主键" prop="isPrimary">
        <el-input v-if="!props.isReadonly" v-model="formData.isPrimary" placeholder="请输入是否是主键 1主键 0不是主键"
                  clearable/>

        <span v-else>{{ formData.isPrimary }}</span>
      </el-form-item>
      <el-form-item label="字段名" prop="fieldName">
        <el-input v-if="!props.isReadonly" v-model="formData.fieldName" placeholder="请输入字段名" clearable/>

        <span v-else>{{ formData.fieldName }}</span>
      </el-form-item>
      <el-form-item label="字段说明" prop="fieldDesc">
        <el-input v-if="!props.isReadonly" v-model="formData.fieldDesc" placeholder="请输入字段说明" clearable/>

        <span v-else>{{ formData.fieldDesc }}</span>
      </el-form-item>
      <el-form-item label="字段长度" prop="fieldLength">
        <el-input v-if="!props.isReadonly" v-model="formData.fieldLength" placeholder="请输入字段长度" clearable/>

        <span v-else>{{ formData.fieldLength }}</span>
      </el-form-item>
      <el-form-item label="字段类型" prop="fieldType">
        <el-input v-if="!props.isReadonly" v-model="formData.fieldType" placeholder="请输入字段类型" clearable/>

        <span v-else>{{ formData.fieldType }}</span>
      </el-form-item>
      <el-form-item label="字段精度" prop="fieldPrecision">
        <el-input v-if="!props.isReadonly" v-model="formData.fieldPrecision" placeholder="请输入字段精度" clearable/>

        <span v-else>{{ formData.fieldPrecision }}</span>
      </el-form-item>
      <el-form-item label="业务说明" prop="businessDesc">
        <el-input v-if="!props.isReadonly" v-model="formData.businessDesc" placeholder="请输入业务说明" clearable/>

        <span v-else>{{ formData.businessDesc }}</span>
      </el-form-item>
      <el-form-item label="是否启用" prop="enabled">
        <el-select v-if="!props.isReadonly" v-model="formData.enabled"
                   placeholder="请选择是否启用" clearable>
          <el-option
              v-for="item in dictionaryStore.filterDictList('Enabled')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>

        <span v-else>{{ dictionaryStore.filterDictName('Enabled', formData.enabled) }}</span>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!props.isReadonly" type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import {useDictStoreHook} from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "DMPMETADATAOBJECTFIELDADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
    () => props.visible,
    (newVal: boolean) => {
      visibleDialog.value = newVal;
    }
);

const rules = reactive({
  isPrimary: [],
  fieldName: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  fieldDesc: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  fieldLength: [],
  fieldType: [
    {min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur"}
  ],
  fieldPrecision: [
    {min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur"}
  ],
  businessDesc: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  enabled: [],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  dataObjectId: "",
  isPrimary: "",
  fieldName: "",
  fieldDesc: "",
  fieldLength: "",
  fieldType: "",
  fieldPrecision: "",
  businessDesc: "",
  enabled: "",
  deleted: "",
  createdUserId: "",
  createTime: "",
  lastUpdatedUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserName: "",
});

watch(
    () => props.data,
    (newVal: any) => {
      formData.id = ""
      if (newVal?.id) {
        const {
          id,
          dataObjectId,
          isPrimary,
          fieldName,
          fieldDesc,
          fieldLength,
          fieldType,
          fieldPrecision,
          businessDesc,
          enabled,
          deleted,
          createdUserId,
          createTime,
          lastUpdatedUserId,
          createdUserName,
          lastUpdateTime,
          lastUpdatedUserName,
        } = newVal;
        Object.assign(formData, {
          id,
          dataObjectId,
          isPrimary,
          fieldName,
          fieldDesc,
          fieldLength,
          fieldType,
          fieldPrecision,
          businessDesc,
          enabled,
          deleted,
          createdUserId,
          createTime,
          lastUpdatedUserId,
          createdUserName,
          lastUpdateTime,
          lastUpdatedUserName,
        });
      }
    }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = ""
  formData.dataObjectId = ""
  formData.isPrimary = ""
  formData.fieldName = ""
  formData.fieldDesc = ""
  formData.fieldLength = ""
  formData.fieldType = ""
  formData.fieldPrecision = ""
  formData.businessDesc = ""
  formData.enabled = ""
  formData.deleted = ""
  formData.createdUserId = ""
  formData.createTime = ""
  formData.lastUpdatedUserId = ""
  formData.createdUserName = ""
  formData.lastUpdateTime = ""
  formData.lastUpdatedUserName = ""
}

const loading = ref(false);

/** 数据仓库对象字段保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/dmpAdmin/dmpmetadataobjectfield/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}


// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});


</script>
